import React, { useState, useEffect } from 'react';
import { Dialog, NumberPicker, Form, Field } from '@alifd/next';
import { t } from '@lingui/macro';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';

const formItemLayout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 14 },
};

const SuperAddition = ({ modal, onSubmit }) => {
  const [data] = useState(() => observable({ count: '0' }));
  const formField = Field.useField();
  const dialog = modal;
  const { record } = dialog || {};

  useEffect(() => {
    if (dialog?.visible) {
      _.assign(data, { count: 0, id: record?.id });
    }
  }, [dialog?.visible]);

  const handleChange = (values, item) => {
    const { name, value } = item;
    _.set(data, name, value);
  };

  const handleOk = () => {
    formField.validate((errors, _) => {
      if (!errors) {
        onSubmit?.(data);
      }
    });
  };

  return (
    <Dialog
      v2
      title={t`追加批次【${record?.couponBatchName}】`}
      visible={dialog?.visible === 'open'}
      onOk={handleOk}
      onClose={dialog?.onClose}
      style={{ width: 350, marginTop: '10%' }}
    >
      <Form field={formField} value={data} onChange={handleChange} useLabelForErrorMessage {...formItemLayout}>
        <Form.Item
          label={t`追加数量`}
          name="count"
        >
          <NumberPicker defaultValue={0} min={0} />
        </Form.Item>
      </Form>
    </Dialog>
  );
};

export default observer(SuperAddition);
